<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>怎么触发浮动，父元素高度坍塌问题</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #main {
      width: 500px;
      /* height: 400px; */
      /* 不设置父元素高，浮动将造成副作用二-----父元素高度坍塌 */
      background-color: yellow;
      /* overflow: hidden; */
    }

    #main1 {
      background-color: #000000;
      /* 清除浮动方式三  溢出隐藏触发BFC，BFC渲染规则之一====浮动的元素也参与计算高度*/
      overflow: hidden;
    }

    .tom {
      height: 100px;
      width: 100px;
      background-color: #222222;
      /* 浮动 脱离文档流 不占空间 */
      float: right;
    }

    .jiffy {
      height: 100px;
      width: 100px;
      background-color: pink;
      float: right;
    }

    p {
      background-color: green;
      /* 清除浮动方式一 */
      /* clear: both; */
    }

    .clear {
      clear: both;
    }

    /* 清除浮动方式二 相当于方式一利用伪元素在后面加内容*/
    /* 伪元素默认是行元素 */
    #main::after {
      content: '';
      /* block 的 clear: both 才会生效 */
      clear: both;
      display: block;
    }
  </style>

</head>

<body>
  <div id="main">
    <div class="tom"></div>
    <div class="jiffy"></div>
    <!-- 解决父元素高度坍塌 本质就是清除浮动，所以方法等同清除浮动方式 -->
    <!-- <div class="clear"></div> -->
    <p>浮动会造成很多副作用一000000文档位置显示不符合预期</p>
  </div>

  <div id="main1">
    <div class="tom"></div>
    <div class="jiffy"></div>
  </div>
</body>

</html>